<template>
  <div class="about">
    <BigpicWidget
      bgurl="p_about.jpg"
      ch="关于三鼎"
      en="ABOUT US"
    ></BigpicWidget>
    <BreadCrum
      :listLeft="listLeft"
      :listRight="listRight"
    ></BreadCrum>
    <div class="content">
      <div class="wrapper">
        <div class="grid_box">
          <div class="main">
            <div class="left_info">
              <div class="left_info_wrap">
                <div class="animated-up" data-animation="once">
                  <div>
                    <p>
                      <span style="color:#e60012;font-size:50px;font-family:微软雅黑">ABOUT US</span>
                    </p>
                  </div>
                </div>
                <div class="animated-up title" data-animation="once">
                  <div>
                    <p>
                      <span style="font-size:28px;font-family:微软雅黑;color:#000000">广东三鼎实业集团有限公司</span>
                    </p>
                  </div>
                </div>
                <div class="fline" data-animation="once">
                  <div class="animated-up line"></div>
                </div>
                <div class="animated-up" data-animation="once">
                  <div>
                    <p style="line-height:2;font-family:微软雅黑;font-size:16px;text-indent:2em;">
                        三鼎集团，创建于2005 年，集团位于享有广东东莞后花园美誉的水濂山周边，十六年深耕信息化系统集成的可研、设计、实施及维护，是行业内少数坚持"不转包、不分包、不挂靠"的智慧城市信息化服务商。具备信息化、智能化高端服务的能力，并获得包括涉密信息系统集成、电子与建筑智能化、信息系统建设和服务能力等行业内优秀资质。2015年至今，三鼎集团投入大量研发经费，打造出"Future Central Connect"、"WISEMAN"两大基础开发平台。通过这两大平台，实现了不同种类、不同品牌、不同传输协议的所有新旧智能设备的接入，真正做到万物互联、数据互通;同时，三鼎集团通过可视化大数据分析中心建设实现人、物、事进行全联接，打造服务便捷、管理睿智、生活智能、优活宜居的城市新生态，顺应政府新基建政策，助力城市向数字经济转型，全维度助推智慧城市发展新方向。
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="right_img">
              <div class="fimg animated-in" data-animation="once">
                <img src="http://img202.yun300.cn/img/jj_index1.png?tenantId=64067&amp;viewType=1&amp;k=1641460449000" alt="三鼎集团" title="三鼎集团" width="100%" height="100%" />
              </div>
            </div>
          </div>
          <div class="long-fline">
            <div class="pFline"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigpicWidget from '@/components/BigpicWidget.vue'
import BreadCrum from '@/components/BreadCrum.vue'

export default {
  name: 'AboutView',
  components: {
    BigpicWidget,
    BreadCrum
  },
  data () {
    return {
      listLeft: ['集团简介', '发展历程', '组织架构', '集团荣誉'],
      listRight: ['首页', '/', '关于三鼎']
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  margin: 0 auto;
  background: #f5f5f5;
  .wrapper {
    max-width: 1640px;
    min-height: 0;
    margin: 0 auto;
    padding: 60px 20px;
    .grid_box {
      background: #fff;
      padding: 30px 3%;
      .main {
        display: flex;
        align-items: center;
        margin: 20px auto 0;
      }
      .long-fline {
        width: 100%;
        max-height: none;
        min-height: 20px;
        margin: 5% auto;
        .pFline {
          width: 100%;
          border-top: 1px solid #f0f0f0;
          opacity: 1;
          border-top-color: #ddd;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .left_info {
      width: 50%;
      .left_info_wrap {
        width: 90%;
      }
      .title {
        margin-top: 10px;
      }
      .fline {
        width: 100%;
        max-width: 80px;
        min-width: 0;
        height: auto;
        max-height: none;
        min-height: 20px;
        margin: 20px auto 20px 0;
        padding: 0;
        .line {
          display: inline-block;
          width: 100%;
          font-size: 0;
          border-top-style: solid;
          border-top-color: #e60012;
          border-top-width: 3px;
          vertical-align: middle;
        }
      }
      .animated-up {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: both;
      }
    }
    .right_img {
      width: 50%;
      overflow: hidden;
      .fimg {
        width: 100%;
        img {
          transition: all .8s ease;
        }
      }
      .fimg:hover {
        img {
          transform: scale(1.1);
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -o-transform: scale(1.1);
        }
      }
      .animated-in {
        animation-name: fadeIn;
        animation-duration: .5s;
        animation-delay: 1s;
        animation-fill-mode: both;
      }
    }
  }
}

span {
  font-family: ariblk !important;
}
</style>
